<template>
	<view >
		<view v-for="(item, index) in showList" :key="index" style="margin-bottom: 24rpx;">
			<view v-if="item.coverImgs.length==1" class="left-layout flex" @tap="handleClickNotice(item)">
				<view class="left">
					<image :src="item.coverImgs[0].url" mode=""></image>
				</view>
				<view class="right flex flexColumn">
					<view class="title line1">
						{{ item.title }}
					</view>
					<view class="desc line1">
						<u-parse :html="item.content"></u-parse>
					</view>
					<view class="time flex">
						{{ item.createTime }}
					</view>
				</view>
			</view>
				
			<view v-else class="layout flex flexColumn" @tap="handleClickNotice(item)">
				<view class="top">
					<view class="title">{{ item.title }}</view>
					<view class="desc line1">
						<rich-text :nodes="item.content"></rich-text>
					</view>
				</view>
				<view class="bottom flex">
					<view v-for="(image, index1) in item.coverImgs" :key="index1">
						<image :src="image.url" mode="" style="width: 220rpx;height: 150rpx;margin-right: 12rpx;"></image>
					</view>
				</view>
				<view class="time">{{ item.createTime }}</view>
			</view>
		</view>
		
	</view>	
</template>

<script>
	export default {
		props: ['list'],
		data() {
			return {
				showList:[]
			};
		},
		watch: {
			list: function (val, oldVal) {
				this.showList = val
			},
		},
		mounted() {
			this.initList();
		},
		methods:{
			initList() {
				const _this = this;
				_this.showList = _this.list;
				console.log('showList', _this.showList)
			},
			handleClickNotice(item) {
				console.log(item,'====')
				this.$emit("click", item);
				uni.navigateTo({
					url: `/subPackages/articleDetail/articleDetail?item=${encodeURIComponent(JSON.stringify(item))}&title=${item.categoryName}`
				})
			},
		},
		created() {
			console.log(this.list,'list')
		},
		
	}
</script>

<style lang="scss" scoped>
	.left-layout{
		display: flex;
		height: 150rpx;
		.left{
			image{
				width: 200rpx;
				height: 150rpx;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}
		}
		.right{
			flex: 1;
			height: 150rpx;
			color: #999;
			.title{ 
				margin-bottom: 10rpx;
				font-size: 30rpx;
				color: #000;
				font-weight: 600;
			}
			.desc{
				font-size: 26rpx;
				height: 35rpx;
			}
			.time{
				font-size: 28rpx;
				flex: 1;
				align-items: flex-end;
			}
		}
	}
	.layout{
		.top{
			.title{
				font-size: 30rpx;
				color: #000;
				font-weight: 600;
			}
			.desc{
				font-size: 26rpx;
				color: #999;
				margin: 8rpx 0 10rpx 0;
			}
			
		}
		.bottom{
			image{
				width: 200rpx;
				height: 150rpx;
				border-radius: 20rpx;
				flex: 1;
				&:not(:last-child){
					margin-right: 10rpx;
				}
			}
			
		}
		.time{
			font-size: 28rpx;
			color: #999;
			margin: 10rpx 0;
		}
	}
</style>